<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>选择课程</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        .error {
            color: red;
        }
    </style>
</head>
<body>
<a href="/dashboard">返回主页</a>
<h1>选择课程</h1>

<!-- 显示错误信息 -->
<div th:if="${error}" class="error" th:text="${error}"></div>

<form action="/choosecourse" method="POST">
    <table>
        <thead>
        <tr>
            <th>课程ID</th>
            <th>课程名称</th>
            <th>选择</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="course : ${courselist}">
            <td th:text="${course.id}"></td>
            <td th:text="${course.name}"></td>
            <td>
                <input type="radio" name="courseId" th:value="${course.id}">
                <input type="hidden" name="courseName" th:value="${course.name}">
            </td>
        </tr>
        </tbody>
    </table>
    <br>
    <button type="submit">添加课程</button>
</form>

<br>
<h2>已选课程</h2>
<table th:if="${selectedCourses != null and selectedCourses.size() > 0}">
    <thead>
    <tr>
        <th>课程ID</th>
        <th>课程名称</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="course : ${selectedCourses}">
        <td th:text="${course.id}"></td>
        <td th:text="${course.name}"></td>
    </tr>
    </tbody>
</table>
<p th:if="${selectedCourses == null or selectedCourses.size() == 0}">暂无已选课程</p>
